import MenuOutlined from "@ant-design/icons/lib/icons/MenuOutlined";
import { Button, Dropdown, DropdownProps } from "antd";
import { ItemType } from "antd/es/menu/interface";
import React, { useMemo } from "react";
import { NavMenu } from "../hooks/useNavMenu";
import styles from '../styles.module.scss';

export interface INavDropdownProps extends DropdownProps {
  navMenu: NavMenu.IUseResult;
  navItems: ItemType[];
  children?: React.ReactNode;

}
export default function NavDropdown(props: INavDropdownProps) {
  const { navMenu, navItems, children } = props
  const items = useMemo(() => navItems.map(v => ({
    ...v,
    icon: void 0
  }) as ItemType), navItems)
  return (
    <Dropdown
      trigger={['click']}
      menu={{
        items,
        onClick: v => navMenu.select(v.key),
        selectedKeys: [navMenu.selectedKey],
        triggerSubMenuAction: 'click',
      }}
      placement={props.placement}>
      {
        children ? children : <Button
          className={styles.btn_toggle_nav_menv}
          onClick={navMenu.toggleCollapsed}
          type="text">
          <MenuOutlined />
        </Button>
      }
    </Dropdown>
  )
}